<template>
  <div style="width: 100%; height: 100%">
    <div id="map" ref="mapv" style="width: 100%; height: 100%"></div>
        <div id="popup">
      <div id="popup-content"></div>
    </div>
  </div>
</template>

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import * as olProj from "ol/proj";
import Overlay from "ol/Overlay.js";
import TileLayer from "ol/layer/Tile";
import { LineString, Point } from "ol/geom";
import VectorLayer from "ol/layer/Vector";
import { Heatmap } from "ol/layer";
import XYZ from "ol/source/XYZ";
import { Vector as VectorSource, Cluster } from "ol/source";
import WMTS from "ol/source/WMTS";
import Feature from "ol/Feature";
import { Polygon, LinearRing } from "ol/geom";
import GeoJSON from "ol/format/GeoJSON";
import { bbox } from "ol/loadingstrategy";
import {
  Circle as CircleStyle,
  Fill,
  Stroke,
  Style,
  Icon,
  Text,
} from "ol/style";
import { toLonLat } from "ol/proj.js";
import { get as getProjection, transform } from "ol/proj";
import { toStringHDMS } from "ol/coordinate.js";
import { returnOrUpdate, getWidth, getTopLeft, getTopRight } from "ol/extent";
import WMTSTileGrid from "ol/tilegrid/WMTS";
import ImageLayer from "ol/layer/Image";
import ImageWMS from "ol/source/ImageWMS";
import { fromExtent } from "ol/geom/Polygon";
import TileWMS from "ol/source/TileWMS";
import { ScaleLine, defaults as defaultControls } from "ol/control";
import jsCity from "@/assets/json/江苏省.json";
import city from "@/assets/json/jiangsu.json";
import china from "@/assets/json/china.json";
//   import {queryDatabymmsi, queryShipByDeviceId} from "@/api/data/deviceData";

let ispro = process.env.NODE_ENV === "production";
let that = null;
let mapv = null;

// let mapturl = "http://36.156.155.131:8090/geoserver/wms";
// let mapturl = "/tailgas/geoserver/wms";
let mapturlpro = "/geoserver/gwc/service/wms";
let mapurlpro1 = "/geoserver1";

//  ispro = false;
export default {
  props: {
    src: {
      type: String,
      required: false,
    },
    zoomChange: {
      type: Boolean,
      required: false,
    },
  },
  data() {
    return {
      shipShow: true,
      type: [],
      map: null,
      pointsMap: {},
      shipSelect: "",
      overlay: null,
      hangdaoMap: null,
      jiangsu: null,
      converLayer: null,
      reverseLayer: null,
      czObj: {},
      isShowCz: false,
      isOpenMap: false,
      mapZoom: 0,
    };
  },
  components: {
    // VueAliplayerV2
  },
  mounted() {
    // this.$nextTick(() => {
    // this.initData();
    let that = this;
    this.initdev();
    //this.initTest();
    mapv = this.map;
    this.map.on("click", function (e) {
      var feature = that.map.forEachFeatureAtPixel(e.pixel, function (feature) {
        return feature;
      });
      console.log(e.coordinate, "点击坐标");
      if (feature) {
        //这里说明我们点击的是点标记，
        if (
          feature.get("features") != undefined &&
          feature.get("features").length > 0
        ) {
          feature = feature.get("features")[0];
        }
        let tadata = feature.get("tadata"); //我们可以通过给点标记传不同的值，来判断点击不同的点标记触发的事件。
        if (tadata) {
          //that.$parent.getClick(tadata, e);
          if (tadata.sectionId == "polygon") {
            that.$parent.mapClick(tadata,e);
          } else if (tadata.sectionId == "point") {
            that.$parent.mapClick(tadata,e);
          } else if (tadata.sectionId == "line") {
            that.$parent.mapClick(tadata,e);
          }
          //含有lnglat 参数的点标记触发事件
        }
      } else {
        //that.$parent.getClick(feature, e);
      }
    });

    var view = this.map.getView();
    this.map.getView().on("change:resolution", () => {
      let zoom = mapv.getView().getZoom();
      this.mapZoom = zoom;
      // this.zoom = zoom;
      // if (this.zoomChange) {
      //   that.$parent.ZoomChange(zoom);
      // }
    });
    setTimeout(function () {
      window.addEventListener("resize", this.handleResize);
    }, 100);
  },
  methods: {
    initTest() {
      for (var index in jsCity.features) {
        var item = jsCity.features[index].geometry.coordinates[0];
        var obj = {
          city: jsCity.features[index].properties.adcode,
          data: jsCity.features[index].properties,
          feature: jsCity.features[index],
        };
        this.addPolygon(item, obj, "", "rgba(255,255,255,0.1)", "#000000");
      }
    },
    isNullStr(value) {
      if (value != null) {
        return value;
      } else {
        return "暂无数据";
      }
    },
    initOverlay() {
      const container = document.getElementById("popup");
      const content = document.getElementById("popup-content");
      this.content = content;
      const closer = document.getElementById("popup-closer");
      const overlay = new Overlay({
        element: container,
        autoPan: {
          animation: {
            duration: 250,
          },
        },
      });
      closer.onclick = function () {
        overlay.setPosition(undefined);
        closer.blur();
        return false;
      };
      this.overlay = overlay;
      this.map.addOverlay(overlay);
    },
    getSgx(value) {
      if (value == 1) {
        return "是";
      } else {
        return "否";
      }
    },
    getCityName(value) {
      for (var index in city) {
        if (value == city[index].code) {
          return city[index].name;
        }
      }
    },
    initData() {
      // this.$request.mapDataList().then((res) => {
      // this.addPoints(res.data.data, "cz", 1, "cz", 100);
      // });
    },
    handleResize() {
      map.updateSize();
    },

    closevideo() {
      this.showvideos = false;
      //this.$refs.VueAliplayerV2.pause();
    },
    goCenter(location, zoom) {
      this.map.getView().setCenter(location);
      this.map.getView().setZoom(zoom);
    },
    transpoints: function (points, type) {
      if (false) {
        return points;
      } else {
        if (type == 1) {
          var pp = [];
          points.forEach((point) => {
            pp.push(transform(point, "EPSG:3857", "EPSG:4326"));
          });
          return pp;
        } else {
          var pp = [];
          points.forEach((point) => {
            pp.push(transform(point, "EPSG:4326", "EPSG:3857"));
          });
          return pp;
        }
      }
      a;
    },
    getWMTSLayerHd(url, layer) {
      let projection = getProjection("EPSG:4326");
      let projectionExtent = projection.getExtent();
      let projection3857 = getProjection("EPSG:3857");
      let projectionExtent3857 = projection.getExtent();
      let size = getWidth(projectionExtent) / 256 / 2;

      function getResolutions() {
        let resolutions = [];
        for (let z = 0; z < 19; ++z) {
          resolutions[z] = size / Math.pow(2, z);
        }

        return resolutions;
      }
      return new TileLayer({
        source: new WMTS({
          url: url,
          // layer: layer,
          layer: "JSGIST-SLDTtdtsl",
          style: "default",
          matrixSet: "ChinaPublicServices_JSGIST-SLDTtdtsl",
          service: "WMTS",
          request: "GetTile",
          version: "1.0.0",
          format: "image/png",
          tileGrid: new WMTSTileGrid({
            origin: getTopLeft(projectionExtent),
            resolutions: getResolutions(),
            // tileSize:2,
            matrixIds: [
              0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18,
              19,
            ],
          }),
        }),
      });
    },
    initdev: function () {
      function getWMTSLayer(url, layer) {
        let key = "ab745c6b1453be5e322b2539c88e5113";
        let projection = getProjection("EPSG:4326");
        let projectionExtent = projection.getExtent();
        let size = (getWidth(projectionExtent) / 256) * 2;

        function getResolutions() {
          let resolutions = [];
          for (let z = 1; z < 19; ++z) {
            resolutions[z] = size / Math.pow(2, z);
          }
          return resolutions;
        }

        return new TileLayer({
          source: new WMTS({
            url: url,
            layer: layer,
            style: "default",
            matrixSet: "c",
            format: "tiles",
            tileGrid: new WMTSTileGrid({
              origin: getTopLeft(projectionExtent),
              resolutions: getResolutions(),
              matrixIds: [
                0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17,
                18, 19,
              ],
            }),
          }),
        });
      }

      var mapturl =
        "http://10.22.4.83:8599/geoserver/smartdzhd/wms?layers=smartdzhd:JS_DZHDT_2025";
      var untiled = new ImageLayer({
        source: new ImageWMS({
          ratio: 1,
          url: mapturl,
          params: {
            SERVICE: "WMS",
            VERSION: "1.1.1",
            REQUEST: "GetMap",
            FORMAT: "image/png",
            TRANSPARENT: "true",
            LAYERS: "smartdzhd:tcz",
            exceptions: "application/vnd.ogc.se_inimage",
            SRS: "EPSG:4326",
            WIDTH: "768",
            HEIGHT: "586",
            BBOX: "114.98291015625,29.630126953125,123.42041015625,36.068115234375",
          },
        }),
      });
      this.hangdaoMap = untiled;
      var projection = getProjection("EPSG:4326");
      const ignMap = getWMTSLayer(
        "https://t{0-7}.tianditu.gov.cn/vec_c/wmts?tk=98ec3e37b32974c2d58ea1a790640fe7",
        "vec"
      );
      const baseMap = this.getWMTSLayerHd(
        "http://10.1.30.123:8090/iserver/services/map-JSGISTSLDTtdtsl/wmts100"
      );
      var map = new Map({
        target: "map",
        layers: [
          // ignMap,
          baseMap,
          // getWMTSLayer(
          //   "https://t{0-7}.tianditu.gov.cn/cva_c/wmts?tk=98ec3e37b32974c2d58ea1a790640fe7",
          //   "cva"
          // ),
          untiled,
          // getWMTSLayer('https://10.22.80.30:9000/cva_c/wmts?tk=98ec3e37b32974c2d58ea1a790640fe7', 'cia'),
        ],
        // projection: "EPSG:4326",
        projection: "EPSG:4326",
        view: new View({
          projection: projection,
          minZoom: 1,
          maxZoom: 20,
        }),
        controls: defaultControls({
          zoom: false,
          // rotate: false,
          // attribution: false,
        }),
      });
      // map.getLayers()[2].setVisible(false);
      var container = document.getElementById("popup");
      this.overlay = new Overlay({
        element: container, //绑定 Overlay 对象和 DOM 对象的
        autoPan: true, // 定义弹出窗口在边缘点击时候可能不完整 设置自动平移效果
        autoPanAnimation: {
          duration: 250, //自动平移效果的动画时间 9毫秒
        },
      });
      
      // map.getView().fit([75.0, 20.0, 135.0, 50.0], map.getSize());
      this.map = map;
      map.getView().setCenter([120.30641611403146, 31.493577663965553]);
      // map.getView().setCenter([120.09079420573109, 32.08146965500419]);
      map.getView().setZoom(10);
      this.mapZoom = 10;
      // map.getView().setZoom(15);
      this.map.addOverlay(this.overlay);
      // this.hangdaoMap.setVisible(false);
    },
    //添加线
    addline: function (linePoint, width, color, item, type) {
      //var points = this.transpoints(linePoint, 0)
      let line = new Feature({
        tadata: {
          data: item,
          type: type,
          sectionId: "line",
          towerNumber: 22,
        },
        geometry: new LineString(linePoint),
        // geometry: new LineString([
        //   transform(linePoint, "EPSG:3857", "EPSG:4326"),
        // ]),
      }); //这里要注意写fromLonLat，很重要
      var style = new Style({
        stroke: new Stroke({
          width: width,
          color: color,
        }),
      });
      line.setStyle(style);
      let linevectorLayer = new VectorLayer({
        source: new VectorSource({
          features: [line], //要绘制多段线，直接push到这里面就行了
        }),
        zIndex: 100,
      });
      this.map.addLayer(linevectorLayer); //这里是执行，执行之后点就出来了
      this.pointsMap[type].push(linevectorLayer);
      linevectorLayer.setVisible(true);
    },
    //添加点
    addPoints(data, icon, size, type, zIndex, show = false) {
      // console.log(data, icon, size, type, zIndex,'addPoints');

      var tamarkerArry = [];
      let tamarker = null;
      for (var index in data) {
        tamarker = new Feature({
          tadata: {
            sectionId: "point",
            towerNumber: 22,
            data: data[index],
            type: type,
          }, //这里是用来传值用的，在接下来的一章里（事件）中我会讲到。
          geometry: new Point(data[index].location), //这里是点坐标的位置，这里要注意fromLonLat
        });
        let style = this.getPointsStyle(
          data[index],
          icon,
          size,
          type,
          data[index].name
        );
        tamarker.setStyle(style); //这里是样式
        tamarkerArry.push(tamarker);
      }

      var markerta = new VectorLayer({
        source: new VectorSource({
          features: tamarkerArry, //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
        }),
        zIndex: zIndex ? zIndex : 200,
      });
      this.map.addLayer(markerta); //这里是执行，执行之后点就出来了
      this.pointsMap[type] = markerta;

      if (type == "video" || type == "wc_sxj" || show) {
        markerta.setVisible(true);
      } else if (type == "ship") {
        markerta.setVisible(this.shipShow);
      } else {
        markerta.setVisible(false);
      }
    },
    // 点聚合
    addPointsCluster(data, icon, size, type, distance) {
      var that = this;
      var tamarkerArry = [];
      let tamarker = null;
      for (var index in data) {
        tamarker = new Feature({
          tadata: {
            sectionId: "point",
            towerNumber: 22,
            data: data[index],
            type: type,
          }, //这里是用来传值用的，在接下来的一章里（事件）中我会讲到。
          geometry: new Point(data[index].location), //这里是点坐标的位置，这里要注意fromLonLat
        });
        // let style = this.getPointsStyle(data[index], icon, size, type);
        // tamarker.setStyle(style); //这里是样式
        tamarkerArry.push(tamarker);
      }
      var source = new VectorSource({
        features: tamarkerArry, //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
      });
      var cluster = new Cluster({
        source: source,
        distance: distance ? distance : 30, //控制聚合的像素距离
      });
      // 创建图层
      var layer = new VectorLayer({
        source: cluster,
        zIndex: 300,
        style: function (feature, resolution) {
          var size = feature.get("features").length;
          if (size == 1) {
            let style = that.getPointsStyle(data[0], icon, size, type);
            return style;
          } else {
            let style = that.getPointsStyle(data[0], icon, 1.1, type);
            return style;
          }
        },
      });

      // var markerta = new VectorLayer({
      //   source: new VectorSource({
      //     features: tamarkerArry, //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
      //   }),
      //   zIndex: 300,
      // });
      this.map.addLayer(layer); //这里是执行，执行之后点就出来了
      this.pointsMap[type] = layer;
    },
    // 点红
    addPointsHd(data, icon, size, type, zIndex) {
      var that = this;
      var tamarkerArry = [];
      let tamarker = null;
      for (var index in data) {
        tamarker = new Feature({
          tadata: {
            sectionId: "point",
            towerNumber: 22,
            data: data[index],
            type: type,
          }, //这里是用来传值用的，在接下来的一章里（事件）中我会讲到。
          geometry: new Point(data[index].location), //这里是点坐标的位置，这里要注意fromLonLat
        });
        tamarkerArry.push(tamarker);
      }
      var source = new VectorSource({
        features: tamarkerArry, //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
      });
      // 创建图层
      var layer = new VectorLayer({
        source: source,
        zIndex: zIndex ? zIndex : 300,
        style: function (feature, resolution) {
          return new Style({
            image: new CircleStyle({
              radius: 22,
              anchor: [30, 50], //锚点
              anchorOrigin: "top-right", //锚点源
              anchorXUnits: "pixels", //锚点X值单位
              anchorYUnits: "pixels", //锚点Y值单位
              stroke: new Stroke({
                color: "red",
              }),
              fill: new Fill({
                color: "red",
              }),
            }),
          });
        },
      });
      this.map.addLayer(layer); //这里是执行，执行之后点就出来了
      this.pointsMap[type] = layer;
    },
    addPointsFunc(data, icon, size, type) {
      var tamarkerArry = [];
      let tamarker = null;
      for (var index in data) {
        data[index].location = [data[index].longitude, data[index].latitude];
        if (type == "bridge") {
          data[index].location = [
            Number(data[index].latitude),
            Number(data[index].longitude),
          ];
        }
        tamarker = new Feature({
          tadata: {
            sectionId: "point",
            towerNumber: 22,
            data: data[index],
            type: type,
          }, //这里是用来传值用的，在接下来的一章里（事件）中我会讲到。
          geometry: new Point(data[index].location), //这里是点坐标的位置，这里要注意fromLonLat
        });

        let style = this.getPointsStyle(data[index], icon, size, type);
        tamarker.setStyle(style); //这里是样式
        tamarkerArry.push(tamarker);
      }
      var markerta = new VectorLayer({
        source: new VectorSource({
          features: tamarkerArry, //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
        }),
        zIndex: 300,
      });
      // if(type == 'duanmian' || type == 'hangbiao'){
      //       markerta.setVisible(true)
      // }
      if (type == "ship") {
        if (this.pointsMap[type] != null) {
          this.map.removeLayer(this.pointsMap[type]);
        }
      }
      this.map.addLayer(markerta); //这里是执行，执行之后点就出来了
      this.pointsMap[type] = markerta;
      // markerta.setVisible(true)
    },

    addPointsSelect(data, icon, size, type) {
      var tamarkerArry = [];
      let tamarker = null;
      for (var index in data) {
        data[index].location = [data[index].longitude, data[index].latitude];
        if (type == "bridge") {
          data[index].location = [
            Number(data[index].latitude),
            Number(data[index].longitude),
          ];
        }
        tamarker = new Feature({
          tadata: {
            sectionId: "point",
            towerNumber: 22,
            data: data[index],
            type: type,
          }, //这里是用来传值用的，在接下来的一章里（事件）中我会讲到。
          geometry: new Point(data[index].location), //这里是点坐标的位置，这里要注意fromLonLat
        });
        let style = this.getPointsStyle(data[index], icon, size, type);
        tamarker.setStyle(style); //这里是样式
        tamarkerArry.push(tamarker);
      }
      var markerta = new VectorLayer({
        source: new VectorSource({
          features: tamarkerArry, //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
        }),
        zIndex: 302,
      });
      // if(type == 'duanmian' || type == 'hangbiao'){
      //       markerta.setVisible(true)
      // }
      if (type == "shipSelect") {
        if (this.shipSelect != null) {
          this.map.removeLayer(this.shipSelect);
        }
      }
      this.shipSelect = markerta;
      this.map.addLayer(markerta); //这里是执行，执行之后点就出来了
      this.pointsMap[type] = markerta;
      // markerta.setVisible(true)
    },

    getPointsStyle(data, icon, size, type, text) {
      let img = new Image();
      let style = null;
      img.src = require("@/assets/images/icons/" + icon + ".png");
      img.onload = () => {
        console.log(img.width/2, img.height/2,"img");
      }
      console.log(size, "size");
      
      var obj = {};
      style = new Style({
        image: new Icon({
          color: "#eee",
          crossOrigin: "anonymous",
          src: require("@/assets/images/icons/" + icon + ".png"), //本地的样式
          scale: size,
          anchor: [13, 13], //锚点
          anchorOrigin: "top-left", //锚点源
          anchorXUnits: "pixels", //锚点X值单位
          anchorYUnits: "pixels", //锚点Y值单位
          offsetOrigin: "top-left", //偏移原点
        }),
      });
      if (["ship", "shipxz"].indexOf(type) > -1) {
        var rotationPi = this.getRotation(data.shipCog);
        style = new Style({
          image: new Icon({
            color: "#eee",
            crossOrigin: "anonymous",
            rotation: Math.PI / rotationPi,
            src: require("@/assets/images/icons/" + icon + ".png"), //本地的样式
            scale: size,
            anchor: [20, 20], //锚点
            anchorOrigin: "top-right", //锚点源
            anchorXUnits: "pixels", //锚点X值单位
            anchorYUnits: "pixels", //锚点Y值单位
            offsetOrigin: "top-right", //偏移原点
          }),
        });
      }

      if (type.indexOf("jbcz") > -1) {
        style = new Style({
          image: new Icon({
            color: "#eee",
            crossOrigin: "anonymous",
            src: require("@/assets/images/icons/" + icon + ".png"), //本地的样式
            scale: size,
            anchor: [60, 60], //锚点
            anchorOrigin: "top-right", //锚点源
            anchorXUnits: "pixels", //锚点X值单位
            anchorYUnits: "pixels", //锚点Y值单位
            offsetOrigin: "top-right", //偏移原点
          }),
          text: new Text({
            text: data.name,
            font: "13px sans-serif",
            textAlign: "center",
            textBaseline: "middle",
            fill: new Fill({
              color: "#000000",
            }),
            stroke: new Stroke({
              color: "#000000",
            }),
            offsetX: 5,
            offsetY: 20,
            placement: "point", //point 则自动计算面的中心k点然后标注  line 则根据面要素的边进行标注
            overflow: false, //超出面的部分不显示
          }),
        });
      }
      return style;
    },
    getRotation(cog) {
      if (90 <= cog && cog <= 270) {
        cog = cog - 90;
      } else if (0 <= cog && cog < 90) {
        cog = cog - 90;
      } else {
        cog = cog - 360 - 90;
      }
      return 180 / cog;
    },
    //添加块
    addPolygon(item, data, text, color, lineColor, type, show = false) {
      var polygon = new Feature({
        tadata: {
          sectionId: "polygon",
          data: data,
          type: type,
        },
        geometry: new Polygon(item),
        type: "polygon",
      });
      let style = [
        new Style({
          fill: new Fill({
            color: color,
          }),
          // 描边
          stroke: new Stroke({
            color: lineColor,
            width: 1,
            lineDash: [5, 5],
            lineCap: "butt",
          }),
          text: new Text({
            text: text,
            font: "13px sans-serif",
            textAlign: "center",
            textBaseline: "middle",
            //font: 'verdana',
            fill: new Fill({
              color: "#000000",
            }),
            // backgroundFill: new Fill({
            //   color: "rgba(220,38,38,0.2)"
            // }),
            stroke: new Stroke({
              color: "#000000",
              // width: 3
            }),
            // font: "10px sans-serif",
            // offsetX: parseInt(0, 10),
            offsetY: 25,
            placement: "point", //point 则自动计算面的中心k点然后标注  line 则根据面要素的边进行标注
            overflow: false, //超出面的部分不显示
          }),
          zIndex: 100,
        }),
      ];
      polygon.setStyle(style);
      var polygonLayer = new VectorLayer({
        source: new VectorSource({
          features: [polygon],
        }),
      });
      this.map.addLayer(polygonLayer);
      this.pointsMap[type].push(polygonLayer);
      if (show) {
        polygonLayer.setVisible(true);
      } else {
        polygonLayer.setVisible(false);
      }
      // this.map.addLayer(polygonLayer);
      //this.areaList.push(polygonLayer);
      // polygonLayer.setVisible(false);
    },
    getPopup(html, e, location) {
      const content = document.getElementById("popup-content");
      content.innerHTML = html;
      this.overlay.setPosition(location ? location : e.coordinate);
    },
    getClose() {
      this.overlay.setPosition(undefined);
    },
    getClean(type) {
      this.map.removeLayer(this.pointsMap[type]);
    },
    getPositioning(obj, zoom) {
      this.map.getView().animate({ center: obj, zoom: zoom ? zoom : 12 });
    },
    showArea(data) {
      if (this.converLayer != null) {
        this.map.removeLayer(this.converLayer);
      }
      let initLayer = new VectorLayer({
        zIndex: 3,
        source: new VectorSource(),
        style: new Style({
          fill: new Fill({
            color: "rgba(20,32,88,0.7)",
          }),
          stroke: new Stroke({
            color: "#f4b49f",
            width: 3,
          }),
        }),
      });
      this.map.addLayer(initLayer);
      this.converLayer = initLayer;
      this.addConver(initLayer, data);
    },
    addConver(converLayer, data) {
      const fts = new GeoJSON().readFeatures(data);
      const ft = fts[0];
      const converGeom = this.erase(ft.getGeometry());
      const convertFt = new Feature({
        id: "conver",
        geometry: converGeom,
      });
      converLayer.getSource().addFeature(convertFt);
    },
    //擦除操作，生产遮罩范围
    erase(geom) {
      const extent = [-180, -90, 180, 90];
      const polygonRing = fromExtent(extent);
      const coords = geom.getCoordinates();
      coords.forEach((coord) => {
        const linearRing = new LinearRing(coord[0]);
        polygonRing.appendLinearRing(linearRing);
      });
      return polygonRing;
    },
    mapCli(val) {
      this.hangdaoMap.setVisible(val);
    },
  },
};
</script>

<style scoped>
#map {
  width: 100%;
  height: 100%;
}

/*隐藏ol的一些自带元素*/

.ol-attribution,
.ol-zoom {
  display: none;
}

.contentFont {
  font-size: 6px;
  line-height: 16px;
}

.shipDiv {
  position: absolute;
  top: 250px;
  left: 140px;
  width: 240px;
  min-height: 120px;
  background-color: white;
}

.el-tabs__header {
  margin: 0 !important;
}

.shipTitle {
  padding-top: 4px;
  padding-left: 10px;
  padding-right: 10px;
  width: 100%;
  height: 20px;
  background-color: #0d25a5;
  color: white;
  font-size: 7px;
}

.shipContent {
  text-align: center;
}

.shipContent >>> .el-tabs__item {
  font-weight: bold;
  color: #a8a8a8;
}

.shipContent >>> .el-tabs__item.is-active {
  color: #0d25a5;
}

.shipContent >>> .el-tabs__active-bar {
  margin-left: 10px;
}

.shipContent >>> .el-tabs__nav {
  padding-left: 10px;
}

.shipContent >>> .el-tabs__active-bar {
  background-color: #0d25a5;
}

.tableSc >>> tr {
  padding: 0;
  height: 3px;
  line-height: 3px;
  font-size: 5px;
}

.tableSc >>> td {
  padding: 0;
  height: 3px;
  line-height: 3px;
}

.icon_div {
  position: absolute;
  top: 330px;
  right: 160px;
  width: 70px;
  min-height: 40px;
  background-color: white;
}

.radio_div {
  position: absolute;
  top: 50px;
  left: 120px;
  padding-top: 4px;
  padding-left: 5px;
  background-color: white;
  padding-right: 4px;
}

.layer_div {
  position: absolute;
  top: 55px;
  right: 160px;
  padding-top: 4px;
  padding-left: 5px;
  padding-right: 4px;
  background-color: white;
  padding-bottom: 5px;
}

.radio_div > div {
  line-height: 10px;
}

.el-tabs__header {
  margin: 0 !important;
}

.popupClass {
  background-size: 100% 100%;
  height: 20vh;
  width: 10vw;
  z-index: 101;
  position: absolute;
  background-color: #fff;
  bottom: 11vh;
  left: 31vw;
}

.ol-popup {
  /* background-image: url("~@/assets/images/jsgh/frame_chuanzha@2x.png"); */
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  /* padding: 15px; */
  bottom: 40px;
  left: -100px;
  min-width: 280px;
  color: white;
  /* background: transparent; */
}

.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}

.ol-popup-closer:after {
  content: "✖";
}

::v-deep .clickTitle {
  /* background-image: url("~@/assets/images/jsgh/name_cz@2x.png"); */
  background-size: 100% 100%;
  background-repeat: no-repeat;
  line-height: 36px;
  padding-left: 10px;
}
</style>
